<template>
    <fieldset>
        <legend>商品</legend>
        <h1>商品:Products</h1>
        <ul>
            <li v-for="item in productData" :key="item.id">
                <b>
                    产品名称:{{ item.title }}
                </b>
                --------
                <b>
                    价格: {{ item.price }}
                </b>
                --------
                <b>
                    库存:{{ item.inventory }}
                </b>
                <button :disabled="item.inventory===0" @click="addCart(item)">+加入购物车</button>
            </li>
            
        </ul>
    </fieldset>
</template>
<script setup>
import {Useproduct} from "../../store/product"
import {storeToRefs} from "pinia"

import {Usecart} from "../../store/cart"
let cartStore=Usecart()
// console.log(Usecart);

let productsStore = Useproduct()
let {productData} = storeToRefs(productsStore)
// 调用action的方法
productsStore.fetch_data()
// 点击添加按钮事件
let addCart=(i)=>{
    // console.log(i)
    cartStore.addcart(i)
    i.inventory-- 
}
</script>